<template>
  <div>
    <div>
      <el-row :gutter="20">
        <!--          搜索区域-->
        <el-form>
          <el-col :span="8">
            <el-form-item label="小区id">
              <el-col :span="10">
                <el-input v-model="queryParam.communityId" size="small" clearable @change="idClear"/>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="小区名称">
              <el-col :span="10">
                <el-input v-model="queryParam.communityName" size="small" clearable @change="nameClear"/>
              </el-col>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-col :span="10">
              <el-button type="primary" size="mini" @click="search()"><i
                class="el-icon-search"
              />搜索
              </el-button>
            </el-col>
            <el-col :span="10">
              <el-button size="mini" @click="reset"><i class="el-icon-refresh"/>重置</el-button>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <br>
    <!-- 批量操作   新增 删除 导出-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteCommunityByIds">
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportTable">导出</el-button>
      </el-col>
    </el-row>
    <!--    添加小区对话框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="35%"
      append-to-body
    >
      <!--       ref="form" :rules="rules"-->
      <el-form  ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="小区名称" prop="communityName">
              <el-input size="large " v-model="form.communityName" placeholder="请输入小区名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="详细地址" prop="communityDetailedAddress">
              <el-input size="large "  v-model="form.communityDetailedAddress" placeholder="请输入详细地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="所属区规划" prop="selected">
              <el-cascader
                popper-class="pc-sel-area-cascader"
                size="large"
                :options="options"
                v-model="selectedOptions"
                :props="props"
                placeholder="请选择地区"
                clearable
                @change="handleChangeArea">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注:">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24" style="margin-left: 30%">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button style="margin-left: 8%" type="primary" @click="save">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--      更换物业-->
    <el-dialog
      :title="title"
      :visible.sync="flag"
      width="60%"
      append-to-body
    >
    <el-table
      v-if="refreshTable"
      :data="deptList"
      row-key="deptId"
      :default-expand-all="isExpandAll"
      :header-cell-style="{'text-align':'left '}"
      :cell-style="{'text-align':'left'}"
      :tree-props="{children: 'deptMenus'}">
      <el-table-column prop="deptName" label="物业名称" width="260"></el-table-column>
      <el-table-column prop="status" label="状态" width="100"></el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.deptId != deptIdA"
            icon="el-icon-success"
            @click="replacePropertyAction(scope.row)"
          >选择</el-button>
          <el-button
            size="mini"
            type="text"
            v-if=" scope.row.deptId == deptIdA"
            icon="el-icon-check"
          >已选择</el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="400"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      </el-table-column>
    </el-table>
    </el-dialog>
    <el-table
      ref="multipleTable"
      :data="CommunityList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="小区id"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.communityId }}</template>
      </el-table-column>
      <el-table-column
        label="小区名称"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.communityName }}</template>
      </el-table-column>
      <el-table-column
        label="省"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.provence.name }}</template>
      </el-table-column>
      <el-table-column
        label="市"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.city.name }}</template>
      </el-table-column>
      <el-table-column
        label="区"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.town.name }}</template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        label="备注"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <a href="#" style="color: dodgerblue" @click="updateOne(scope.$index,scope.row)"><i
            class="el-icon-edit">修改</i></a>
          <a href="#" style="color: dodgerblue" @click="deleteOne(scope.row)"><i class="el-icon-delete-solid">删除</i></a>
          <a href="#" style="color: dodgerblue"  @click="replaceProperty(scope.row)"><i class="el-icon-setting">更换物业</i></a>
        </template>


      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="this.currentPage"
      :page-sizes="[4, 8, 14, 20]"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script>

export default {

  name: 'CommunityMessageVue',
  data() {
    return {
      property:false,
      zyCommunity: {
        'communityId': '', 'communityName': '', 'communityCode': '', 'communityProvenceCode': '',
        'communityCityCode': '', 'communityTownCode': '', 'communityDetailedAddress': '', 'communityLongitude': '',
        'communityLatitude': '', 'deptId': '', 'communitySort': '', 'createBy': '', 'createTime': '', 'updateBy': '',
        'updateTime': '', 'remark': ''
      },
      title: '',
      // 表单参数
      form: {
        remark: ''
      },
      selectedAreasInfo: [],
      rules: {
        communityName: [
          { required: true, message: '小区名称不能为空', trigger: 'blur' }
        ],
        communityDetailedAddress: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        selected: [
          { required: true, message: '请选择区划', trigger:  'blur' }
        ],
      },
      showScrollTop: 0,
      total: 0, // 总数据条数
      currentPage: 1, // 当前所在页默认是第一页
      pageSize: 4, // 每页显示多少行数据 默认设置为4
      CommunityList: [], // 这里是从后端获取的所有数据
      pages: 0,
      lastPageNum: 0,
      LastData: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false,
      ids: [],
      searchName: '',
      options: [],
      selectedOptions: [],
      params: [0, 1, 2, 3, 4],
      props: {
        value: 'code',
        label: 'name',
        children: 'cities'
      },
      deptDicts: ['sys_normal_disable'],
      queryParam: {
        "communityId": "",
        "communityName": ""
      },
      isExpandAll: true,
      deptIdA:'',
      deptList: [],
      refreshTable: true,
      flag:false
    }
  },
  created() {
    this.loadList()
    this.loadCommunityList(this.currentPage, this.pageSize)
    this.getDept();
  },
  methods: {
    loadCommunityList(currentPage, pageSize) {
      this.axios.post('/community/communityPageList?currentPage=' + currentPage + '&pageSize=' + pageSize, this.queryParam).then(res => {
        this.CommunityList = res.data.data.records
        this.total = res.data.data.total
      })
    }, save() {
      this.dialogVisible = false
      if (!this.form.communityId) {

        this.zyCommunity.communityProvenceCode = this.selectedOptions[0]
        this.zyCommunity.communityCityCode = this.selectedOptions[1]
        this.zyCommunity.communityTownCode = this.selectedOptions[2]
        this.zyCommunity.communityName = this.form.communityName
        this.zyCommunity.communityDetailedAddress = this.form.communityDetailedAddress
        this.zyCommunity.remark = this.form.remark
        console.log(this.zyCommunity)
        console.log(this.selectedOptions)
        this.axios.post('/community/add', this.zyCommunity).then(res => {
          if (res.data.data === '添加成功') {
            this.$message({
              message: '添加成功!',
              type: 'success'
            })
          }
          this.selectedOptions = [];
          this.form={};
          this.loadCommunityList(this.currentPage, this.pageSize)

        })
      } else {
        console.log("修改")
        console.log(this.selectedOptions)
        this.dialogVisible = false
        this.zyCommunity.communityId = this.form.communityId
        this.zyCommunity.communityName = this.form.communityName
        this.zyCommunity.communityDetailedAddress = this.form.communityDetailedAddress
        this.zyCommunity.remark = this.form.remark
        this.zyCommunity.communityCode = this.form.communityCode
        // this.zyCommunity=this.form
        this.axios.put("/community/update", this.zyCommunity).then(res => {
          if (res.data.data == "修改成功") {
            if (res.data.data === '修改成功') {
              this.$message({
                message: '修改成功!',
                type: 'success'
              })
            }
          }
          this.loadCommunityList(this.currentPage, this.pageSize)

        })
      }

    },
    loadList() {
      this.axios.get("/area/list", this.params).then(res => {
        this.options = res.data.data

      })
    }
    , handleChangeArea(value) {
      this.selectedOptions = value
      console.log(this.selectedOptions)
    }, reset() {
      this.queryParam = {};
      this.zyCommunity = {
        "communityId": '', "communityName": '', "communityCode": '', "communityProvenceCode": '',
        "communityCityCode": '', "communityTownCode": '', "communityDetailedAddress": '', "communityLongitude": '',
        "communityLatitude": '', "deptId": '', "communitySort": '', "createBy": '', "createTime": '', "updateBy": '',
        "updateTime": '', "remark": ''
      }
      this.loadCommunityList(this.currentPage, this.pageSize)
    }, deleteOne(row) {
      this.axios.delete("/community/delOne/" + row.communityId).then(res => {
        if (res.data.data == "删除成功") {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        }
        console.log(this.currentPage)
        console.log(this.pages)
        console.log(this.total)
        if ((this.total - 1) / this.pageSize == 0) {
          this.currentPage -= 1
        }
        // if(this.currentPage<1){
        //   this.currentPage=1
        // }
        this.loadCommunityList(this.currentPage, this.pageSize)
      })
    },

    // 复选框操作

    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.loadCommunityList(this.currentPage, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loadCommunityList(currentPage, this.pageSize)
    },
    search() {
      console.log(this.queryParam)
      this.axios.post('/community/communityPageList?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize, this.queryParam).then(res => {
        this.CommunityList = res.data.data.records
        this.total = res.data.data.total
      })
    },

    add() {
      this.dialogVisible = true
      this.zyCommunity = {
        communityId: '', communityName: '', communityCode: '', communityProvenceCode: '',
        communityCityCode: '', communityTownCode: '', communityDetailedAddress: '', communityLongitude: '',
        communityLatitude: '', deptId: '', communitySort: '', createBy: '', createTime: '', updateBy: '',
        updateTime: '', remark: ''
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.communityId)
      // console.log(this.ids)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 批量删除
    deleteCommunityByIds(row) {
      const communityIds = row.communityId || this.ids
      console.log(communityIds)
      this.axios.post('/community/delByIds', communityIds).then(res => {
        // console.log(res.data.data)
        if (res.data.data === '删除成功') {
          this.$message({
            message: '删除成功!',
            type: 'warning'
          })
          if ((this.total - this.ids.length) % this.pageSize == 0) {
            this.currentPage -= 1
          }
          this.loadCommunityList(this.currentPage, this.pageSize)
        }
      })
    }, exportTable(row) {
      const communityIds = row.communityId || this.ids
      this.axios.post('/community/excel', communityIds).then(res => {
        console.log(res.data.data)
        if (res.data.data === '导出成功') {
          this.$message({
            message: '已成功导入桌面',
            type: 'success'
          })
        }
      })
    }, idClear() {
      this.loadCommunityList(this.currentPage, this.pageSize)
    }, nameClear() {
      this.loadCommunityList(this.currentPage, this.pageSize)
    }, updateOne(index, row) {
      this.loadList();
      this.dialogVisible = true;
      this.form = row
      console.log(this.form)
      this.selectedOptions = [];
      this.selectedOptions = [parseInt(this.form.communityProvenceCode), parseInt(this.form.communityCityCode), parseInt(this.form.communityTownCode)]
      console.log(this.selectedOptions)

    },  getDept: function () {
      this.axios.get('/dept').then(res => {
        this.deptList = res.data
        this.deptMenus =res.data;
      })
      console.log(this.deptDicts)
      this.axios.get('/dict/maps/' + this.deptDicts.join()).then(res => {
        this.deptDict = res.data.sys_normal_disable['dictData']
        // console.log(res)
        // console.log(this.deptDict)
      })
    },replaceProperty(row){
      this.zyCommunity = JSON.parse(JSON.stringify(row));
      this.flag = true;
      this.title = '更换物业';
      this.deptIdA=row.deptId;

    }, replacePropertyAction(row){
      this.zyCommunity.deptId=row.deptId;
      this.$confirm("是否更换物业","提示",{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        console.log(this.zyCommunity)
          this.axios.put("/community/updateZyCommunityDept",{"communityId":this.zyCommunity.communityId,"deptId":this.zyCommunity.deptId})
            .then(res=>{
                if (res.data.data = "更换物业成功") {
                  this.$message({
                    showClose: true,
                    message: '更换物业成功',
                    type: 'success',
                    center: true,
                  })
                }
              this.loadCommunityList(this.currentPage,this.pageSize);
              this.getDept();
              this.replaceProperty();
              }
            )
        }
      ).catch(() => {
        this.$message({
          showClose: true,
          message: '取消更换',
          type: 'warning',
          center: true,
        })
      })

    }
  }
}
</script>

<style scoped>
.train-tree {
  max-width: 850px !important;
  overflow: scroll !important;
}

.train-tree {
  max-width: 700px !important;
  overflow: scroll !important;
}
</style>
<style lang="less">
.pc-sel-area-cascader {
  // 选择面板样式
  .el-cascader-panel {
    width: 543px;
  }

  .el-cascader-menu__wrap {
    // 设置选择器省市区分块面板高度
    height: 305px;
  }

  .el-cascader-menu {
    // 省市区分块右边框
    border: none;
  }

  .el-scrollbar__thumb {
    // 上下滚动条
    display: none;
  }

  .el-cascader-node {
    height: 40px;
  }

  .el-cascader-node:hover {
    // 设置鼠标滑过时文字颜色
    color: #4e5ef1;
  }

  .el-cascader-node__label {
    // 设置文字样式
    padding: 0 7px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  // 文字选中样式及span背景颜色
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    color: #4e5ef1;
  }

  .el-icon-check {
    // 去掉选中小对勾
    display: none;
  }

  .el-icon-arrow-right {
    // 选项去掉右侧小图标
    display: none;
  }

  // 选择器面板边框及圆角设置
  border-radius: 12px !important;
  border: 1px solid #f6f7f8 !important;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07) !important;
}

.pc-sel-area-cascader[x-placement^='bottom'] {
  // 选择器面板与输入框的距离
  margin-top: 1px !important;
}

.pc-sel-area-cascader[x-placement^='bottom'] .popper__arrow {
  // 输入框下面小三角形
  display: none;
}
</style>
